<template>
  <div>
    <main>
      <div class="h78">已报课程列表</div>
      <div class="list">
        <ul>
          <li v-for="(item, index) in courseList" :key="index" class="scaleDiv">
            <div class="imgshow" @click="toDetail(item)">
              <img v-lazy="item.image" alt="" />
            </div>
            <div class="content">
              <span class="title">{{ item.title }}</span>
              <span class="memo">{{ item.memo }}</span>
            </div>
          </li>
        </ul>
      </div>

      <!-- <el-pagination
        large
        background
        :page-size="rows"
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        @current-change="handleCurrentChange"
      >
      </el-pagination> -->
    </main>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
export default {
  data () {
    return {
      courseList: [] // 已报课程列表
    }
  },
  created () {
    this.getCourseByOrder()
  },
  methods: {
    // 获取已报课程列表
    getCourseByOrder () {
      sendPost(api.getCourseByOrder, {}).then(res => {
        // console.log(res);
        this.courseList = res.data
      })
    },
    // 存储点击的已报课程id
    toDetail (item) {
      this.$router.push('regcourse?id=' + item.id)
      window.sessionStorage.setItem('regcourseId', item.id)
      window.sessionStorage.setItem('regcourseitem', JSON.stringify(item))
    }
  }
}
</script>
<style lang="less" scoped>
.scaleDiv:hover {
  transform: scale(1.03);
  box-shadow: 0 0 20px 2px #918f8f; /*盒子阴影*/
}
/deep/.el-pagination button,
.el-pagination span:not([class*="suffix"]) {
  display: inline-block;
  font-size: 0.8125rem;
  min-width: 2.21875rem;
  height: 2.5rem;
  line-height: 2.5rem;
  vertical-align: top;
  box-sizing: border-box;
}
/deep/.el-pager li {
  padding: 0 0.25rem;
  font-size: 0.9375rem;
  min-width: 2.21875rem;
  height: 2.5rem !important;
  width: 2.5rem;
  line-height: 2.5rem;
  box-sizing: border-box;
  text-align: center;
}
::v-deep {
  .el-pagination.is-background .el-pager li:not(.disabled) {
    line-height: 2.5rem;
    background-color: #fff; // 进行修改未选中背景和字体
    // color: #fff;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #ff5e4e; // 进行修改选中项背景和字体
    color: #fff;
    line-height: 2.5rem;
  }
}
.el-pagination {
  font-size: 1.25rem;
  text-align: center;
  padding-top: 5rem;
}
main {
  width: 56.875rem;
  background-color: #fff;
  padding: 0 1.25rem;
  box-sizing: border-box;
  .h78 {
    height: 4.875rem;
    border-bottom: 1px solid #ededed;
    line-height: 4.875rem;
    font-size: 1.25rem;
    color: #333;
    font-weight: bold;
  }
  .list {
    display: flex;
    padding: 1.875rem 1.25rem;
    ul {
      display: flex;
      flex-wrap: wrap;
      :nth-child(3n) {
        margin-right: 0;
      }
      li {
          transition: all 0.3s;
        width: 16.25rem;
        margin-right: 1.5625rem;
        padding-bottom: 0.8125rem;
        background: #ffffff;
        border: 1px solid #ededed;
        display: flex;
        flex-direction: column;
        margin-bottom: 1.875rem;
        .imgshow {
          height: 9.4375rem;
          background-color: #333;
          cursor: pointer;
          img {
            height: 100%;
            width: 100%;
          }
        }
        .content {
          display: flex;
          flex-direction: column;
          padding: 0 0.9375rem;
        }
        .title {
          height: 3.4375rem;
          line-height: 3.4375rem;
          font-size: 1.25rem;
          color: #666;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .memo {
          height: 36px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: wrap;
        }
      }
    }
  }
}
</style>
